<template>
    <div>
        <dv-full-screen-container>
            <dv-border-box-11 title="BI样例1">
                <div class="bi-contationr">
                    <div class="chart1">
                        <dv-border-box-10>
                            <v-chart class="chart" :option="option"></v-chart>
                        </dv-border-box-10>
                    </div>

                    <div style="padding-top: 20px" class="chart1">
                        <dv-border-box-10>
                            <v-chart class="chart" :option="option"></v-chart>
                        </dv-border-box-10>
                    </div>

                    <div style="padding-top: 10px" class="chart1">
                        <dv-border-box-13>

                            <v-chart class="chart" :option="option2"></v-chart>
                        </dv-border-box-13>
                    </div>


                    <!--中间地图-->
                    <div style="padding-top: 10px" class="chartMid">

                        <dv-border-box-13>
                            <v-chart class="chart" :option="option2"></v-chart>
                        </dv-border-box-13>
                    </div>

                    <div style="padding-top: 10px" class="chart2">
                        <dv-border-box-13>
                            <v-chart class="chart" :option="option2"></v-chart>
                        </dv-border-box-13>
                    </div>
                </div>
            </dv-border-box-11>
        </dv-full-screen-container>
    </div>
</template>

<script>

    import {use} from "echarts/core";
    import {CanvasRenderer} from "echarts/renderers"

    import {PieChart, LineChart, ScatterChart, EffectScatterChart} from "echarts/charts"


    import {
        TitleComponent,
        TooltipComponent,
        LegendComponent
    } from "echarts/components"

    import VChart from "vue-echarts"

    use([

        CanvasRenderer,
        PieChart,
        TitleComponent,
        TooltipComponent,
        LegendComponent,
        LineChart,
        ScatterChart,
        EffectScatterChart
    ])


    export default {
        name: "sam1",
        props: {
            msg: String
        }, comments: {
            VChart
        },
        data() {
            return {
                option: {
                    title: {
                        text: "Traffic Sources",
                        left: "center"
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: "vertical",
                        left: "left",
                        data: [
                            "Direct",
                            "Email",
                            "Ad Networks",
                            "Video Ads",
                            "Search Engines"
                        ]
                    },
                    series: [
                        {
                            name: "Traffic Sources",
                            type: "pie",
                            radius: "55%",
                            center: ["50%", "60%"],
                            data: [
                                {value: 335, name: "Direct"},
                                {value: 310, name: "Email"},
                                {value: 234, name: "Ad Networks"},
                                {value: 135, name: "Video Ads"},
                                {value: 1548, name: "Search Engines"}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                }
                            }
                        }
                    ]
                },
                option2: {},


            }
        },
        beforeMount() {
            this.option2 = JSON.parse(JSON.stringify(this.option));
            this.option2.title.text = "折线图";
            this.option2.series[0].type = "line";
            this.option2.xAxis = {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            };
            this.option2.yAxis = {
                type: 'value'
            };
        }, methods: {

        }
    }
</script>

<style scoped>

    #dv-full-screen-container {
        background-color: #101d82;
    }

    .bi-contationr {
        padding-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .chart {
        padding: 5px;
    }

    .chart1 {
        width: 500px;
        height: 300px
    }

    .chartMid {
        position: absolute;
        left: 550px;
        top: 40px;
        width: 800px;
        height: 700px
    }

    .chart2 {
        position: absolute;
        right: 20px;
        top: 40px;
        width: 500px;
        height: 300px
    }
</style>